{% extends "base.html" %}
{%load staticfiles%}

{% block css %}
  <link rel="stylesheet" href="{% static 'dist/css/dataTables.bootstrap.min.css' %}">
  <link rel="stylesheet" href="{% static 'bower_components/select2/dist/css/select2.min.css' %}">
{% endblock %}

{% block content %}
<!-- Content Header (Page header) -->
  <section class="content-header">
    <h1>
      用户及权限
      <small>角色列表</small>
    </h1>
    <ol class="breadcrumb">
      <li><a href="/manage/role_manage"><i class="fa fa-dashboard"></i> 角色</a></li>
    </ol>
  </section>
  <section class="content">
    <div class="callout callout-info">
      如果你需要从别的系统(如企业内部统一登录系统)同步角色信息，建议通过定时任务脚本来直接操作loonflow数据库实现
    </div>
    <div class="row">
      <div class="col-md-12">
        <div class="box box-default">
          <button type="button" class="btn btn-success" data-toggle="modal" data-target="#RoleModal">
                新增
          </button>
          <table id="role_table" class="table table-striped table-bordered dataTable no-footer" >
            <thead>
              <tr>
                  <th>ID</th>
                  <th>角色名</th>
                  <th>角色描述</th>
                  <th>标签</th>
                  <th>创建人</th>
                  <th>创建时间</th>
                  <th>操作</th>
              </tr>
            </thead>
            <tbody>
      
            </tbody>
          </table>
        </div>
      </div>
    </div>

    <div class="modal fade" id="roleUserModal">
        <div class="modal-dialog" style="width: 980px;">
            <div class="modal-content">
              <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                  <span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="roleUserTitle"></h4>
              </div>
              <div class="modal-body">
                <button type="button" class="btn btn-success" data-toggle="modal" data-target="#AddRoleUserModal">
                  新增
                </button>
                <table id="role_user_table" class="table table-striped table-bordered dataTable no-footer" style="width:100%">
                  <thead>
                    <tr>
                      <th>ID</th>
                      <th>用户名</th>
                      <th>姓名</th>
                      <th>操作</th>
                    </tr>
                  </thead>
                  <tbody>
                  </tbody>
                </table>
              </div>
            </div>
          </div> 
    </div>

    <div class="modal fade" id="RoleModal">
      <div class="modal-dialog" style="width: 980px;">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title">角色</h4>
          </div>
          <div class="modal-body">
            <form class="form-horizontal" id='role_form'>
              <div class="box-body">
                <div class="form-group">
                  <label for="roleName" class="col-sm-3 control-label" required="true">角色名<span style="color:red">*</span></label>
                  <div class="col-sm-9">
                    <input type="text" class="form-control" id="roleName" required="true" placeholder="请输入角色名称">
                  </div>
                </div>
                <div class="form-group">
                    <label for="roleDescription" class="col-sm-3 control-label">角色描述</label>
                    <div class="col-sm-9">
                      <input type="text" class="form-control" id="roleDescription" placeholder="请输入角色的相关描述信息">
                    </div>
                </div>
                <div class="form-group">
                    <label for="roleLabel" class="col-sm-3 control-label">标签</label>
                    <div class="col-sm-9">
                      <input type="text" class="form-control" id="roleLabel" placeholder="标签用于自己定制，如从别的系统同步过来时对应关联信息，格式自定">
                    </div>
                </div>

                <input type="text" class="form-control" id="roleId" style="display:none">

              </div>
              <div >
                <div class="callout callout-info">
                  如果你需要从别的系统(如企业内部统一登录系统)同步角色信息，建议通过定时任务脚本来直接操作loonflow数据库实现
                </div>
                </div>

              <!-- /.box-body -->
              <div class="box-footer">
                <!-- <button type="submit" class="btn btn-info pull-right">确定</button> -->
                <input type="button" value="保存" class="btn btn-info pull-right" onclick = "submitRole();" />
              </div>
              <!-- /.box-footer -->
            </form>
          </div>
        </div>
        <!-- /.modal-content -->
      </div>
        <!-- /.modal-dialog -->
    </div>

    <div class="modal fade" id="AddRoleUserModal">
      <div class="modal-dialog" style="width: 980px;">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title">角色</h4>
          </div>
          <div class="modal-body">
            <form class="form-horizontal" id='add_role_user_form'>
              <div class="box-body">
                <div class="form-group">
                  <label for="roleName" class="col-sm-3 control-label" required="true">选择用户<span style="color:red">*</span></label>
                  <div class="col-sm-9">
                    <select class="form-control select2" id="roleUserId" data-placeholder="请输入用户名称查询"
                              style="width: 100%;">
                      </select>
                  </div>
                </div>
                <input type="text" class="form-control" id="addRoleUserRoleId" style="display:none">
                <div class="box-footer">
                <!-- <button type="submit" class="btn btn-info pull-right">确定</button> -->
                <input type="button" value="保存" class="btn btn-info pull-right" onclick = "submitRoleUser();" />
              </div>
              </div>

              <!-- /.box-footer -->
            </form>
          </div>
        </div>
        <!-- /.modal-content -->
      </div>
        <!-- /.modal-dialog -->
    </div>
  </section>


<!-- /.content-wrapper -->

{% endblock %}

{% block js %}
<!-- jQuery 3 -->
<script src="{% static 'bower_components/jquery/dist/jquery.min.js' %}"></script>
<!-- Bootstrap 3.3.7 -->
<script src="{% static 'bower_components/bootstrap/dist/js/bootstrap.min.js' %}"></script>
<!-- AdminLTE App -->
<script src="{% static 'dist/js/adminlte.min.js' %}"></script>
<script src="{% static 'bower_components/select2/dist/js/select2.full.min.js' %}"></script>

<script src="{% static 'dist/js/jquery.dataTables.min.js' %}"></script>
<script src="{% static 'dist/js/dataTables.bootstrap.min.js' %}"></script>
<script src="{% static 'dist/js/jquery.validate.js' %}"></script>
<script src="{% static 'dist/js/sweetalert.min.js' %}"></script>

<script src="{% static 'dist/js/account/role_manage.js' %}"></script>

<script>
  $("#roleUserModal").on("hidden.bs.modal", function() {
    $(this).removeData("bs.modal");
    // $('#user_role_table').dataTable().Rows.Clear()
    $('#role_user_table').dataTable().fnClearTable();
    $('#role_user_table').dataTable().fnDestroy();
  });

  $('#role_table').DataTable({
  ordering: false,
  "serverSide":true,
  "bFilter":true,
  "lengthMenu": [10, 25, 50, 100 ],
  "language": {
    "searchPlaceholder": "角色名或描述模糊搜索"
  },

  ajax: function (data, callback, settings) {
    console.log(data);
    var param = {};
    param.per_page = data.length;//页面显示记录条数，在页面显示每页显示多少项的时候
    param.page = (data.start / data.length)+1;//当前页码
    param.search_value=data.search.value;
    console.log(param);    
    $.ajax({
      type: "GET",
      url: "/api/v1.0/accounts/roles",
      cache: false,  //禁用缓存
      data: param,  //传入组装的参数
      dataType: "json",
      success: function (result) {
        var returnData = {};
        returnData.draw = data.draw;//这里直接自行返回了draw计数器,应该由后台返回
        returnData.recordsTotal = result.data.total;//返回数据全部记录
        returnData.recordsFiltered = result.data.total;//后台不实现过滤功能，每次查询均视作全部结果
        returnData.data = result.data.value;//返回的数据列表
        //console.log(returnData);
        //调用DataTables提供的callback方法，代表数据已封装完成并传回DataTables进行渲染
        //此时的数据需确保正确无误，异常判断应在执行此回调前自行处理完毕
        callback(returnData);
        },
      
    })
    
  },
  columns: [
      { "data": "id"},
      { "data": "name" },
      { "data": "description" },
      { "data": "label" },
      { "data": "creator_info", render: function(data, type, full) {if(data.creator_alias){return data.creator_alias}else{return data.creator_username}}},
      { "data": "gmt_created" },
      {render: function(data, type, full){
        var rosJson=JSON.stringify(full).replace(/"/g, '&quot;');
        var editRoleButton = '<a onclick="showEditRoleModel(' + rosJson + ')' + '">编辑</a>'
        var roleUserButton = '<a onclick="showRoleUsers(' + full.id + ',' + "'" + full.name + "'" + ')' + '"' + '>管理角色用户</a>'
        var delRoleButton = '<a onclick="delRole(' + full.id + ')' + '">删除</a>'
        return ('<div>' + editRoleButton + '/' + roleUserButton + '/' + delRoleButton + '</div>')}}

  ]
  
})

  $('#roleUserId').select2({
      placeholderOption: "first",
      allowClear:true,
      language: {
        searching: function() {
            return "输入用户名称搜索(支持用户名、昵称模糊搜索)...";
        }
    },
    ajax: {
      url: "/api/v1.0/accounts/users",
      delay: 300,
      dataType: 'json',
      data: function (params) {
        var query = {
          search_value: params.term,
          per_page: 100,
        }
        return query;
      },
      processResults: function (data) {
      return {
        results: data.data.value.map(function(item) {
          console.log(item.name);
          return {
            id: item.id,
            text: item.username + "(id:" + item.id + "," + "alias:" + item.alias + ")"
          };

        })
      };

    },
      },

    cache: true
    });

</script>
{% endblock %}
